<template>
  <div id="popup" class="ol-popup" v-show="isPopupShow">
    <a
      href="javascript:void(0)"
      id="popup-closer"
      class="ol-popup-closer"
      @click="closePopup"
    ></a>
    <div id="popup-content">
      <!-- 文字弹窗 -->
      <div v-if="!displayVideo">
        <div v-for="(item, index) in popupContent" :key="index" class="nowrap">
          {{ index }} : {{ item }}
        </div>
        <!-- 只在事件上显示处理状态选择框，并根据切换选项更新服务器数据 -->
        <div v-if="status.isShow && (route.query.type == 'traffic' || route.query.type == 'admin') ">处理状态：
          <el-select
            v-model="status.message"
            style="width: 180px"
            @change="changeOption(value)"
          >
            <el-option label="未处理" value="0"/>
            <el-option label="处理中" value="1"/>
            <el-option label="已处理" value="2"/>
          </el-select>
        </div>
      </div>
      <!-- 视频弹窗 -->
      <div v-if="displayVideo">
        <video controls autoplay muted width="600px">
          <source src="@/assets/video/roadWatch.mp4" type="video/mp4" />
        </video>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  getCurrentInstance,
  watch,
  toRefs,
} from "vue";
const { proxy } = getCurrentInstance();
let $map = ref(null);
import { usePopupStore } from "@/stores/popupStore";
import { useRoute } from "vue-router";
const route = useRoute();
/* 根据商店状态显示弹窗--是否显示弹窗，弹窗位置，弹窗内容，是否显示视频，事件处理状态等 */
const { isPopupShow, popupPosition, popupContent, displayVideo,status} = toRefs(
  usePopupStore()
);
const { hidePopup,setStatus} = usePopupStore();

let popup = null;
let content = null;

/* 监听弹窗位置变化 */
watch(popupPosition, (newVal) => {
  if (popup) {
    popup.setPosition(newVal, true);
  }
});

/* 加载时初始化openlayers弹窗 */
onMounted(() => {
  console.log(popupPosition);
  $map.value = proxy.$map;

  /* 为弹窗设置遮罩层 --dom树上没有他的结构*/
  // 二. 将dom转换成overlay
  const container = document.getElementById("popup");
  content = document.getElementById("popup-content");
  popup = new ol.Overlay({
    //要转换成overlay的HTML元素
    element: container,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: "bottom-center",
    //是否应该停止事件传播到地图窗口
    stopEvent: true,
    autoPanAnimation: {
      //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
      duration: 250,
    },
    offset: [-0, -0],
  });
  $map.value.addOverlay(popup);
  // 三. 设置弹窗内容
  // 四. 绑定关闭事件
});

/* 关闭弹窗 */
function closePopup() {
  popup.setPosition(null);
  hidePopup();
}

/* 处理状态--根据选项更新服务器数据 */
function changeOption(value) {
  setStatus(status.value.message)
}
</script>
<style scoped>
.ol-popup {
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  max-width: 650px;
  z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

#popup-content {
  font-size: 14px;
  font-family: "微软雅黑";
}

#popup-content .markerInfo {
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
}
</style>
